<template>
  <div class="member-not-logged content">
    <div class="mainView">
      <div>
        <!-- 头部banner -->
        <div class="box">
          <div class="topInfo">
            <div class="mainTitle" :style="$store.state.app.language==='en' ? 'font-size: 22px;' : ''">{{$t('index.bannerTitle')}}</div>
            <div class="subTitle">{{$t('index.bannerSubTitle2')}}</div>
            <div class="subTitle" style="padding-top: 30px;">
                <button class="bannerBtn btnbig" @click="handleWalletPermission">{{$t('wallet.promistLogin')}}</button>
            </div>
          </div>
          <div class="bannerImg">
            <img :src="vipImageUrl" alt="banner">
          </div>
        </div>
        <!-- 会员等级说明 -->
        <div class="view memberMain">
          <div class="member roterView">
            <!-- <div class="usertop2 flex memberTitle">
              <span>{{$t('ndxStake.memberLv')}}</span>
              <span class="pl">{{$t('ndxStake.stakeNdx')}}</span>
            </div> -->
            <div class="memberCenter">
              <level-descrip />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import levelDescrip from './components/LevelDescrip';

export default {
  name: 'member-not-logged', // 未登录会员中心
  data() {
    return {
      vipImageUrl: '', // 会员banner图
    }
  },
  components: {
    levelDescrip,
  },
  props: {
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.$router.push('/member');
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.handleGetMemberImg();
    },
  },
  created() {
  },
  mounted() {
    this.handleGetMemberImg();
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    const scat = this.$store.state.app.scatter;
    if (scat && scat.identity) {
      this.$router.push('/member');
    }
  },
  methods: {
    // 获取会员banner图
    handleGetMemberImg() {
      this.$http.post('/levelRule/getVipImage').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.vipImageUrl = res.vipImageUrl;
      });
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/views/myWallet/user.scss';
@import '@/assets/css/variables.scss';
$skyblue: #278EDA;

.memberTitle {
  border-bottom: 1px solid #ebeef5;

  span:nth-child(2) {
    font-size: 12px;
    color: #999;
  }
}

.member {
  min-height: 100px;
  padding: 20px 40px;
}

.memberMain {
  margin-top: 15px;
  background: #fff;
}

.content{

  .pd8px{
    padding-top: 8px;
  }

  .gray{
    color: #999;
  }

  .mainView{
    color: $skyblue;
    width: $-min-width;
    min-height: 600px;
    margin: 20px auto;

    .box{
      position: relative;
      box-shadow: 0px 0px 8px #ddd;

      .bannerImg {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 551px;
        height: 276px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .topInfo{
      background: rgba(255, 255, 255, .8) url('../../../assets/img/wallet/bg-walletData.png') no-repeat;
      background-size: 105% 105%;
      background-position: -5px -10px;
      padding: 20px 120px 20px 70px;
      min-height: 276px;

      .mainTitle {
        word-wrap: break-word;
        word-break: normal;
        font-size: 32px;
        text-align: left;
        padding: 10px 0;
        width: 630px;
        margin-top: 20px;
      }

      .subTitle {
        text-align: left;
        padding-left: 1px;
        font-size: 17px;
        line-height: 30px;
      }

      .bannerBtn{
        padding: 10px 35px;
        outline: none;
        width: 180px;
        font-size: 15px;
        border-radius: 5px;
        margin: 8px auto;
        border: 1px solid $skyblue;
        color: $skyblue;
        background: transparent;
        cursor: pointer;
        &:hover {
          background: $skyblue;
          color: #fff;
        }
      }
    }
  }
}
// 主图样式
.theme-1B1D27{
  .content{
    .mainView{
      color: rgba(255, 255, 255, .8);

      .btnbig {
        border-color: #4e5b85;
        background: transparent;
        &:hover {
          color: white;
          background: #278EDA;
        }
      }

      .roterView {
        background: $-black1;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, .4);

        .memberTitle {
          border-color: rgba(255, 255, 255, 0.015) !important;

          span:nth-child(1) {
            color: rgba(255, 255, 255, .8) !important;
          }
        }
      }

      .account, .money-eos {
        color: rgba(255, 255, 255, .8);
      }

      .money-right {
        color: hsla(0,0%,100%,.8)
      }

      .box{
        // box-shadow: 0 0 8px rgba(0, 0, 0, .3);
        box-shadow: none;
      }

      .showInfo{
        background: $-black1;
        color: rgba(255, 255, 255, .8);
      }

      .topInfo{
        background: rgb(21, 44, 88);

        .btn{
          color: #fff;
          box-shadow: 0 0 0 #000000;
          background: $-btn-skyblue;
        }
      }

      .inblo {
        color: rgba(255, 255, 255, .8);
      }

      .topUrl{
        /deep/ .el-breadcrumb__inner{
          color: rgba(255, 255, 255, .8);
        }
      }
    }
  }
}
</style>
